<script setup lang="ts">
import { MenuOption, useMessage } from 'naive-ui';
import { IconPropeller, IconHome2, IconBook, IconUser, IconGlass } from '@tabler/icons-vue';
import { Component, h } from 'vue';
import { RouterLink } from 'vue-router';
import { IconTilde } from '@tabler/icons-vue';

const message = useMessage();
function handleUpdateValue(key: string, item: MenuOption) {
    // message.info('[onUpdate:value]: ' + JSON.stringify(key))
    // message.info('[onUpdate:value]: ' + JSON.stringify(item))
}
function renderIcon(icon: Component) {
    return () => h(icon, null, { default: () => h(icon) })
}

const menuOptions: MenuOption[] = [
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: `/fanList`
                },
                { default: () => '风扇、温控' }
            ),
        key: 'go-back-home',
        icon: renderIcon(IconHome2)
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: `/fanListInvisible`
                },
                { default: () => '风扇、温控（隐藏）' }
            ),
        key: 'go-back-fanListInvisible',
        icon: renderIcon(IconHome2)
    },
    {
        key: 'divider-1',
        type: 'divider',
        props: {
            style: {
                marginLeft: '32px'
            }
        }
    },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: `/globalConfig`
                },
                { default: () => '全局控制&关于' }
            ),
        key: 'go-back-globalConfig',
        icon: renderIcon(IconTilde)
    },
]


</script>

<template>
    <div style="position: relative; width: 100%; height: 100%;">
        <n-layout position="absolute">
            <n-layout-header style="height: 64px; padding: 24px" bordered>
                <n-space align="center" size="small">
                    <IconPropeller /> <label>随风而动 - FanMotionWink</label>
                </n-space>
            </n-layout-header>
            <n-layout has-sider position="absolute" style="top: 64px;">
                <n-layout-sider bordered content-style="padding: 0;">
                    <n-menu :options="menuOptions" @update:value="handleUpdateValue" />
                </n-layout-sider>
                <n-layout content-style="padding: 24px;">
                    <router-view></router-view>
                </n-layout>
            </n-layout>
        </n-layout>
    </div>
</template>
<style scoped>
</style>
